<template>
  <section>
    <el-form label-width="100px" size="mini">
      <el-form-item :label="sale.key" v-for="(sale,index) in saleList" :key="index">
        <el-switch v-model="sale.val" active-text="是" inactive-text="否" @change="switchEvent" :disabled="disabled"></el-switch>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "selSkuSale",
    props:['sku','disabled'],
    data(){
      return{
        saleList:[
          {key:'参与店铺活动',val:false,code:'joinSale'},
          {key:'叠加优惠券',val:false,code:'joinCoupon'},
        ],
      }
    },
    watch:{
      sku(nv,ov){
        if(nv) this.init(nv)
      }
    },
    created() {
      console.log('没有typeData----',this.sku,this.sku.joinSale,this.sku.joinCoupon)
      this.init(this.sku)
    },
    methods: {
      init(sku) {
        //先判断有没有设置过这俩属性
        this.saleList.forEach(sale=>{
          if(sku[sale.code] == undefined){
            console.log('没设置过该参数？？？',sale.code)
            Vue.set(sku,[sale.code],sale.val)
            // sku[sale.code]=sale.val
          }else {
            console.log('已经设置过，并赋值到显示数据---------',sale.val,sku[sale.code])
            sale.val=sku[sale.code]
          }
        })
        console.log('看一下显示数据----------',this.saleList)
        // this.makeDataUi(sku.props)
      },
      switchEvent(array){
        console.log('变动事件-------',array,this.saleList)
        this.makePropData(this.saleList)
      },
      makePropData(array){//时刻都要同步到前面
        array.forEach(sale=>{
          this.sku[sale.code]=sale.val
        })
        console.log('看一下显示数据----------',this.sku)
      }
    }
  }
</script>

<style scoped>

</style>
